<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spirit8</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/swiper-bundle.min.css">
    <link rel="stylesheet/less" href="/css/reset.less">
    <link rel="stylesheet/less" href="/css/common.less">
    <link rel="stylesheet/less" href="/css/index.less">
</head>
<body>
    <nav class="navbar navbar-default bgcolor">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Spirit8</a>
          </div>
      
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#Home">Home</a></li>
                <li><a href="#About">About</a></li>
                <li><a href="#services">services</a></li>
                <li><a href="#portfolio">portfolio</a></li>
                <li><a href="#contact">contact</a></li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
    <div id="banner">
        <h1>wELCOME on <span>spirit8</span></h1>
        <h5>We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span></h5>
        <div class="arrow-btn">
            <a href="#footer">
                <img src="/images/arrow.png" alt="">
            </a>
        </div>
    </div>
    <div id="About">
      <div class="container">
        <div class="left">
          <img src="./images/about-background.png" alt="">
        </div>
        <div class="right">
          <div class="small-title">
            ABOUTS US
          </div>
          <div class="big-title">Some words <span>about us</span></div>
          <div class="line"></div>
          <div class="content">
            We love building and rebuilding brands through our  specific skills. Using colour, fonts, and illustration, we brand companies in a way they will never forget.
          </div>
          <ul>
            <li>
              <img src="./images/icon16.png" alt="">
              Mission - <span>We deliver uniqueness and quality</span>
            </li>

            <li>
              <img src="./images/icon16.png" alt="">
              Skills - <span>Delivering fast and excellent results</span>
            </li>

            <li>
              <img src="./images/icon16.png" alt="">
              Clients - <span>Satisfied clients thanks to our experience</span>
            </li>
          </ul>
          <div class="about-btn">
            <img src="./images/about-btn.png" alt="">
            Browse our work
          </div>
        </div>
      </div>
    </div>
    <div id="team">
      <h1>Meet <span>our team</span></h1>
      <div class="line1"></div>
      <div class="line2"></div>

      <!-- swiper -->
      <div class="swiper team-swiper container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="list">
                    <div class="item">
                        <div class="avatar">
                            <img src="/images/avatar.jpg" alt="">
                        </div>
                        <div class="nickname">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="info">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>

                    <div class="item">
                        <div class="avatar">
                            <img src="/images/avatar.jpg" alt="">
                        </div>
                        <div class="nickname">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="info">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>

                    <div class="item">
                        <div class="avatar">
                            <img src="/images/avatar.jpg" alt="">
                        </div>
                        <div class="nickname">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="info">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>

                    <div class="item">
                        <div class="avatar">
                            <img src="/images/avatar.jpg" alt="">
                        </div>
                        <div class="nickname">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="info">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
            </div>

            <div class="swiper-slide">
                <div class="list">
                    <div class="item">
                        <div class="avatar">
                            <img src="/images/avatar.jpg" alt="">
                        </div>
                        <div class="nickname">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="info">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>

                    <div class="item">
                        <div class="avatar">
                            <img src="/images/avatar.jpg" alt="">
                        </div>
                        <div class="nickname">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="info">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>

                    <div class="item">
                        <div class="avatar">
                            <img src="/images/avatar.jpg" alt="">
                        </div>
                        <div class="nickname">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="info">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>

                    <div class="item">
                        <div class="avatar">
                            <img src="/images/avatar.jpg" alt="">
                        </div>
                        <div class="nickname">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="info">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
            </div>

            <div class="swiper-slide">
                <div class="list">
                    <div class="item">
                        <div class="avatar">
                            <img src="/images/avatar.jpg" alt="">
                        </div>
                        <div class="nickname">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="info">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>

                    <div class="item">
                        <div class="avatar">
                            <img src="/images/avatar.jpg" alt="">
                        </div>
                        <div class="nickname">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="info">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>

                    <div class="item">
                        <div class="avatar">
                            <img src="/images/avatar.jpg" alt="">
                        </div>
                        <div class="nickname">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="info">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>

                    <div class="item">
                        <div class="avatar">
                            <img src="/images/avatar.jpg" alt="">
                        </div>
                        <div class="nickname">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="info">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
      
      <!-- bootstrap -->
      <!-- <div class="container">
          <div id="carousel-example-generic" class="carousel slide promo" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
              <li data-target="#carousel-example-generic" data-slide-to="1"></li>
              <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>
          
            <div class="carousel-inner" role="listbox">
              <div class="item active">
                <div class="carousel-caption">
                  <div class="content">
                    <div class="circle"></div>
                    <div class="name">
                      Jason Statham
                      <p>Knife designer</p>
                    </div>
                    <div class="test">Do not seek to change what has come before. Seek to create that which has not.</div>
                  </div>
                  <div class="content">
                    <div class="circle"></div>
                    <div class="name">
                      Jason Statham
                      <p>Knife designer</p>
                    </div>
                    <div class="test">Do not seek to change what has come before. Seek to create that which has not.</div>
                  </div>
                  <div class="content">
                    <div class="circle"></div>
                    <div class="name">
                      Jason Statham
                      <p>Knife designer</p>
                    </div>
                    <div class="test">Do not seek to change what has come before. Seek to create that which has not.</div>
                  </div>
                  <div class="content">
                    <div class="circle"></div>
                    <div class="name">
                      Jason Statham
                      <p>Knife designer</p>
                    </div>
                    <div class="test">Do not seek to change what has come before. Seek to create that which has not.</div>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="carousel-caption">
                  <div class="content">
                    <div class="circle"></div>
                    <div class="name">
                      Jason Statham
                      <p>Knife designer</p>
                    </div>
                    <div class="test">Do not seek to change what has come before. Seek to create that which has not.</div>
                  </div>
                  <div class="content">
                    <div class="circle"></div>
                    <div class="name">
                      Jason Statham
                      <p>Knife designer</p>
                    </div>
                    <div class="test">Do not seek to change what has come before. Seek to create that which has not.</div>
                  </div>
                  <div class="content">
                    <div class="circle"></div>
                    <div class="name">
                      Jason Statham
                      <p>Knife designer</p>
                    </div>
                    <div class="test">Do not seek to change what has come before. Seek to create that which has not.</div>
                  </div>
                  <div class="content">
                    <div class="circle"></div>
                    <div class="name">
                      Jason Statham
                      <p>Knife designer</p>
                    </div>
                    <div class="test">Do not seek to change what has come before. Seek to create that which has not.</div>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="carousel-caption">
                  <div class="content">
                    <div class="circle"></div>
                    <div class="name">
                      Jason Statham
                      <p>Knife designer</p>
                    </div>
                    <div class="test">Do not seek to change what has come before. Seek to create that which has not.</div>
                  </div>
                  <div class="content">
                    <div class="circle"></div>
                    <div class="name">
                      Jason Statham
                      <p>Knife designer</p>
                    </div>
                    <div class="test">Do not seek to change what has come before. Seek to create that which has not.</div>
                  </div>
                  <div class="content">
                    <div class="circle"></div>
                    <div class="name">
                      Jason Statham
                      <p>Knife designer</p>
                    </div>
                    <div class="test">Do not seek to change what has come before. Seek to create that which has not.</div>
                  </div>
                  <div class="content">
                    <div class="circle"></div>
                    <div class="name">
                      Jason Statham
                      <p>Knife designer</p>
                    </div>
                    <div class="test">Do not seek to change what has come before. Seek to create that which has not.</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </div> -->
    </div>
    <div id="services">
      <h1>take a look at <span>our services</span></h1>
      <div class="line1"></div>
      <div class="line2"></div>
      <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
      <div class="container">
        <div class="content">
          <div class="item">
            <img src="./images/Forma 1.png" alt="">
          </div>
          <h3>Web design</h3>
          <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        </div>
        <div class="content">
          <div class="item">
            <img src="./images/Forma 2.png" alt="">
          </div>
          <h3>Mobile apps</h3>
          <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        </div>
        <div class="content">
          <div class="item">
            <img src="./images/Forma 3.png" alt="">
          </div>
          <h3>PHOTOGRAPHY</h3>
          <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        </div>
        <div class="content">
          <div class="item">
            <img src="./images/Forma 4.png" alt="">
          </div>
          <h3>marketing</h3>
          <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        </div>
      </div>
    </div>
    <div id="clients">
      <h1>SOME OF <span>OUR CLIENTS</span></h1>
      <div class="line1"></div>
      <div class="line2"></div>

      <div class="swiper clients-swiper container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="list">
                <div class="content">
                  <img src="./images/Layer 69.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 65.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 68.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 67.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 64.png" alt="">
                </div>
              </div>
            </div>

            <div class="swiper-slide">
              <div class="list">
                <div class="content">
                  <img src="./images/Layer 64.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 65.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 67.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 68.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 69.png" alt="">
                </div>
              </div>
            </div>

            <div class="swiper-slide">
              <div class="list">
                <div class="content">
                  <img src="./images/Layer 64.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 65.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 67.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 68.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 69.png" alt="">
                </div>
              </div>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
      <!-- bootstrap -->
      <!-- <div class="container">
        <div id="carousel-example-generic-cs" class="carousel slide promo" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic-cs" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic-cs" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic-cs" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <div class="carousel-caption">
                <div class="content">
                  <img src="./images/Layer 64.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 65.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 67.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 68.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 69.png" alt="">
                </div>
              </div>
            </div>
            <div class="item">
              <div class="carousel-caption">
                <div class="content">
                  <img src="./images/Layer 64.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 65.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 67.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 68.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 69.png" alt="">
                </div>
              </div>
            </div>
            <div class="item">
              <div class="carousel-caption">
                <div class="content">
                  <img src="./images/Layer 64.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 65.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 67.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 68.png" alt="">
                </div>
                <div class="content">
                  <img src="./images/Layer 69.png" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> -->
    </div>
    <div id="portfolio">
      <h1>take a look at <span>our work</span></h1>
      <div class="line1"></div>
      <div class="line2"></div>
      <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>

      <div class="container">
        <div class="row justify-content-between align-items-center py-3">
            <div class="col-12 col-md-auto text-center text-md-left">
                <div class="left">FILTER BY TYPE</div>
                <div class="right">
                  <div class="item">All</div>
                  <div>|</div>
                  <div class="item">Web design</div>
                  <div>|</div>
                  <div class="item">Mobile design</div>
                  <div>|</div>
                  <div class="item">Photograpy</div>
                </div>
            </div>
            <div class="col-12 col-md-auto text-center text-md-right">
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="filterDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Tab
                    </button>
                    <div class="dropdown-menu" aria-labelledby="filterDropdown">
                      <ul>
                        <li>All</li>
                        <li>Web design</li>
                        <li>Mobile design</li>
                        <li>Photography</li>
                      </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="dropdown">
          <div class="left">Filter by type</div>
          <div class="right">
            <div class="item">All</div>
            <div>|</div>
            <div class="item">Web design</div>
            <div>|</div>
            <div class="item">Mobile design</div>
            <div>|</div>
            <div class="item">Photograpy</div>
          </div>
        </div> -->

        <div class="list">
          <div class="item">
            <img src="./images/item1.png" alt="">
          </div>
          <div class="item">
            <img src="./images/item1.png" alt="">
          </div>
          <div class="item">
            <img src="./images/item1.png" alt="">
          </div>
          <div class="item">
            <img src="./images/item1.png" alt="">
          </div>
        </div>

        <div class="list">
          <div class="item">
            <img src="./images/item3.png" alt="">
          </div>
          <div class="item">
            <img src="./images/item3.png" alt="">
          </div>
          <div class="item">
            <img src="./images/item3.png" alt="">
          </div>
          <div class="item">
            <img src="./images/item3.png" alt="">
          </div>
        </div>

        <div class="list">
          <div class="item">
            <img src="./images/item4.png" alt="">
          </div>
          <div class="item">
            <img src="./images/item4.png" alt="">
          </div>
          <div class="item">
            <img src="./images/item4.png" alt="">
          </div>
          <div class="item">
            <img src="./images/item4.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div id="test">
      <h1><span>our clients’ </span>testimonials</h1>
      <div class="line1"></div>
      <div class="line2"></div>

      <div class="swiper clients-swiper container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="list">
                <div class="content">
                  This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                </div>
                <div class="content">
                  Dean Martin, CEO Acme Inc.
                </div>
              </div>
            </div>

            <div class="swiper-slide">
              <div class="list">
                <div class="content">
                  This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                </div>
                <div class="content">
                  Dean Martin, CEO Acme Inc.
                </div>
              </div>
            </div>

            <div class="swiper-slide">
              <div class="list">
                <div class="content">
                  This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                </div>
                <div class="content">
                  Dean Martin, CEO Acme Inc.
                </div>
              </div>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <div id="contact">
      <h1>feel free to <span>contact us</span></h1>
      <div class="line1"></div>
      <div class="line2"></div>
      <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. </p>

      <div class="container">
        <div class="flexbox">
          <div class="name">
            <p>Name</p>
            <input type="text">
          </div>
          <div class="email">
            <p>Email</p>
            <input type="text">
          </div>
        </div>
        <div class="message">
          <p>Message</p>
          <input type="text">
        </div>
        <button>SEND</button>
      </div>
    </div>
    <div id="footer">
      <div class="container">
        <p>ALL RIGHTS RESERVED. COPYRIGHT © 2014 <span>SPIRIT8</span></p>
        <div class="icon">
          <div>
            <img src="./images/facebook.png" alt="">
          </div>
          <div>
            <img src="./images/twitter.png" alt="">
          </div>
          <div>
            <img src="./images/google.png" alt="">
          </div>
          <div>
            <img src="./images/linkedin.png" alt="">
          </div>
          <div>
            <img src="./images/dribbble.png" alt="">
          </div>
        </div>
      </div>
    </div>
</body>
</html>
<script src="/js/jquery-3.7.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/swiper-bundle.min.js"></script>
<script src="/js/less.min.js"></script> 


<script>

  var mySwiper = new Swiper ('.team-swiper', {
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
      clickable :true,
    },
  })    
  
  var mySwiper = new Swiper ('.clients-swiper', {
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
      clickable :true,
    },
  }) 

  // 锚点跳转滑动效果 $ => jquery 选择器 写法跟css选择器一样
  $('#bs-example-navbar-collapse-1 a[href],#banner a[href],#up a[href]').click(function(){
        // 判断当前的路径是否跟事件的路径一致
        if(location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname)
        {
            // /index.html
            // let reg = /^\//;
            // console.log(location.pathname.match(reg));
            // console.log(location.pathname.replace(/^\//,''));
            // 获取元素（string） => 实例对象 通过id选择器获取
            let target = $(this.hash);// #el
            // console.log(this.hash);
            console.log(location);

            // $('[name="banner"]')
            target = target.length > 0 && target || $('[name=' + this.hash.slice(1) + ']');
            
            // 一定要当他找到锚点元素的时候，才跳转锚点
            if(target.length > 0)
            {
                // 获取目标元素的位置
                var targetOffset = target.offset().top + 10;

                //让页面的body和html 滚动到 targetOffset这个位置
                $('html,body').animate({
                    scrollTop: targetOffset
                }, 1000);
            }
        }

    });
</script>